<template>
    <div class="g-btmbar">
      <div
        class="m-playbar m-playbar-unlock"
        style="top: -7px; visibility: visible"
      >
        <div class="updn">
          <div class="right f-fl"></div>
        </div>
        <div class="bg"></div>
        <div class="hand" title="展开播放条"></div>
        <div class="wrap" id="g_player" style="margin-left: -498.5px">
          <div class="btns">
            <a href="javascript:;" class="prv" title="上一首(ctrl+←)">上一首</a>
            <a href="javascript:;" class="ply j-flag pas" title="播放/暂停(p)"
              >播放/暂停</a
            >
            <a href="javascript:;" class="nxt" title="下一首(ctrl+→)">下一首</a>
          </div>
          <div class="head j-flag">
            <img
              src="https://p2.music.126.net/CT-C64y0Jk1HId2GHt49Fw==/109951167937418529.jpg?param=34y34"
            /><a href="#" hidefocus="true" class="mask"></a>
          </div>
          <div class="play">
            <div class="j-flag words">
              <a
                hidefocus="true"
                href="#"
                class="f-thide name fc1 f-fl"
                title="雁书"
                >雁书</a
              ><span class="by f-thide f-fl"
                ><span title="艾热 AIR"
                  ><a class="" href="#">艾热&nbsp;AIR</a></span
                ></span
              ><a href="#" class="src" title="来自榜单"></a>
            </div>
            <div class="m-pbar">
              <div class="barbg j-flag">
                <div class="rdy" style="width: 70.2942%"></div>
                <div class="cur" style="width: 66.5917%">
                  <span class="btn f-tdn f-alpha"><i></i></span>
                </div>
              </div>
              <span class="j-flag time"><em>02:50</em> / 04:16</span>
            </div>
          </div>
          <div class="oper f-fl">
            <a href="javascript:;" class="icn icn-pip" title="画中画歌词"
              >画中画歌词</a
            >
            <a href="javascript:;" class="icn icn-add j-flag" title="收藏"
              >收藏</a
            >
            <a href="javascript:;" class="icn icn-share" title="分享">分享</a>
          </div>
          <div class="ctrl f-fl f-pr j-flag">
            <div class="m-vol" style="visibility: hidden">
              <div class="barbg"></div>
              <div class="vbg j-t">
                <div class="curr j-t" style="height: 12.6296px"></div>
                <span class="btn f-alpha j-t" style="top: 70px"></span>
              </div>
            </div>
            <a href="javascript:;" class="icn icn-vol"></a>
            <a href="javascript:;" class="icn icn-loop" title="循环"></a>
            <span class="add f-pr">
              <span class="tip" style="display: none">已开始播放</span>
              <a href="javascript:;" title="播放列表" class="icn icn-list s-fc3"
                >170</a
              >
            </span>
            <div class="tip tip-1" style="display: none">循环</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
  };
  </script>
   
  <style lang = "less" scoped>
  .g-btmbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    z-index: 1002;
    .m-playbar {
      position: absolute;
      /* top: -53px; */
      left: 0;
      width: 100%;
      height: 53px;
      margin: 0 auto;
      .updn {
        position: relative;
        z-index: 11;
        .right {
          position: absolute;
          top: -1px;
          right: 0;
          width: 15px;
          height: 54px;
          background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
            no-repeat 0 9999px;
          background-position: -52px -393px;
          pointer-events: none;
        }
      }
      .bg {
        height: 53px;
        zoom: 1;
        margin-right: 67px;
        background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
          no-repeat 0 9999px;
        background-position: 0 0;
        background-repeat: repeat-x;
      }
      .hand {
        position: absolute;
        top: -10px;
        width: 100%;
        height: 20px;
        cursor: pointer;
      }
      .wrap {
        position: absolute;
        left: 50%;
        top: 6px;
        z-index: 15;
        width: 980px;
        height: 47px;
        margin: 0 auto;
        /* margin-left: -490px; */
        .btns {
          width: 137px;
          padding: 6px 0 0 0;
          float: left;
          a {
            display: block;
            float: left;
            width: 28px;
            height: 28px;
            margin-right: 8px;
            margin-top: 5px;
            text-indent: -9999px;
            background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
              no-repeat 0 9999px;
          }
          .prv {
            background-position: 0 -130px;
          }
          .ply {
            width: 36px;
            height: 36px;
            margin-top: 0;
            background-position: 0 -204px;
          }
          .nxt {
            background-position: -80px -130px;
          }
        }
        .head {
          position: relative;
          margin: 6px 15px 0 0;
          width: 34px;
          height: 34px;
          float: left;
          img {
            width: 34px;
            height: 34px;
            border: 0;
          }
          .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
            width: 34px;
            height: 35px;
            background: url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
              no-repeat 0 9999px;
            background-position: 0 -80px;
          }
        }
        .play {
          position: relative;
          width: 608px;
          float: left;
          .words {
            height: 28px;
            overflow: hidden;
            color: #e8e8e8;
            text-shadow: 0 1px 0 #171717;
            line-height: 28px;
          }
          .barbg,
          .cur,
          .rdy,
          .left {
            background:  url(https://s2.music.126.net/style/web2/img/frame/playbar.png?0e26a44f235273020b4404d0afd684d0)
              no-repeat 0 9999px;
          }
          .m-pbar {
            width: 493px;
  
            .barbg,
            .cur,
            .rdy {
              height: 9px;
              background-position: right 0;
            }
          }
        }
      }
      #g_player .play {
        width: 581px;
        .m-pbar,
        .m-pbar .barbg {
          width: 466px;
        }
      }
    }
    .f-fl {
      float: left;
    }
  }
  </style>